<div class="power-forecast-container">
  <section class="power-forecast-main flex flex-column flex-full">
    <header class="forecast-main-header flex">
      <div class="years ">
        <span class="farm-name">
          <i></i>
        </span>
        <span (click)=onClickHeader(0) [ngClass]="{active:active==0}">短期预测电量</span>
        <span (click)=onClickHeader(1) [ngClass]="{active:active==1}">超短预测期电量</span>
      </div>
      <div class="time-choose flex-full flex" *ngIf='active==0'>
        <button class="choose" (click)="onChoose(0)">未来72小时</button>
        <span>选择时间：</span>
        <span>
          <p-calendar [locale]="en" [(ngModel)]="startTime" showTime="showTime" hourFormat="24"></p-calendar>
          <span>---</span>
          <p-calendar [locale]="en" [(ngModel)]="endTime" showTime="showTime" hourFormat="24"></p-calendar>
        </span>
        <button class="button" (click)="onSearch(0)">查询</button>
        <a class="export" (click)="exportData(0)" *ngIf="tableData?.tr?.length" #ex>导出预测功率</a>
      </div>
      <div class="time-choose flex-full flex" *ngIf='active==1'>
        <button class="choose" (click)="onChoose(1)">未来4小时</button>
        <span>选择时间：</span>
        <span>
          <p-calendar [locale]="en" [(ngModel)]="shortStartTime" showTime="showTime" hourFormat="24"></p-calendar>
          <span>---</span>
          <p-calendar [locale]="en" [(ngModel)]="shortEndTime" showTime="showTime" hourFormat="24"></p-calendar>
        </span>
        <button class="button" (click)="onSearch(1)">查询</button>
        <a class="export" (click)="exportData(1)" *ngIf="shortTableData?.tr?.length" #ex>导出预测功率</a>
      </div>
    </header>
    <section class="forecast-main-content flex-full">
      <table *ngIf='active==0' cellspacing="0" cellpadding=0 #extab>
        <thead>
          <tr>
            <th *ngFor="let item of tableData.th">
              {{item}}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of tableData?.tr">
            <td>{{item?.time | date : 'yyyy-MM-dd HH:mm'}}{{item?.desc}}</td>
            <td>{{item?.total | number:'1.0-2'}}</td>
            <td *ngFor="let td of item.td">{{td | number:'1.0-2'}}</td>
            
          </tr>
          
        </tbody>
      </table>
      <table *ngIf='active==1' cellspacing="0" cellpadding=0 #extab>
        <thead>
          <tr>
            <th *ngFor="let item of shortTableData.th">
              {{item}}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of shortTableData?.tr">
            
            <td>{{item?.time | date : 'yyyy-MM-dd HH:mm:ss'}}{{item?.desc}}</td>
            <td>{{item?.total | number:'1.0-2'}}</td>
            <td *ngFor="let td of item.td">{{td | number:'1.0-2'}}</td>
            
          </tr>
          
        </tbody>
      </table>
    </section>
  </section>
</div>